<div class="row animate fadeIn">
    <form id="add_rates_form" class="form-horizontal"  method="post">
        <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Add Rates</i></h5>
            <div class="ibox-tools">    
                <button  id="sads" class="btn btn-sm btn-primary save-btn-tab">Save</button>
                <a id = "cancel_add" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
            </div>
        </div>
        <div class="ibox-content">
          <div class="form-group">
            <label class="col-lg-3 control-label">Charge List</label>
            <div class="col-lg-4">
              <select name="chargelist_id" class="form-control chosen">
                <option value="">--</option>
                <?php foreach ($chargelist as $c): ?>
                <option value="<?php echo $c->list_id; ?>"><?php echo $c->list_name; ?></option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>   
          <div class="form-group">
              <label class="col-lg-3 control-label">Rate Name</label>
            <div class="col-lg-4">
              <input type="text" name="rate_name" class="form-control">
            </div>
          </div>
          <div class="form-group">
              <label class="col-lg-3 control-label">Description</label>
            <div class="col-lg-4">
              <input type="text" name="rate_description" class="form-control">
            </div>
          </div>
          <div class="form-group">
              <label class="col-lg-3 control-label">Enable</label>
            <div class="col-lg-4">
              <input type="checkbox" value="ok" name="ena_rate" id="rate_ena" class="i-checks" checked>
            </div>
          </div>
        </div>
    </form>
<!--  -->
        <div id="add_rate_sched" class="ibox-content">
            <h3 style="color: #00afef">Create Rate Schedule</h3>
              <form  id="rate_list_form" class="form-inline">
                <input type="hidden" name="hidden_rate_id" id="s_rate_id">
            </br>
              <table id="pgTable"class="table table-bordered" style="width:100%;">
                <thead>
                    <tr>
                      <th style="">Charge Element</th>
                      <th style="">Description</th>
                      <th style="width:130px;text-align:right;">Usage Quantity</th>
                      <th style="width:130px;text-align:right;">Rate</th>
                      <th style="width:50px;">Action</th>
                    </tr>
                    <tr>
                      <td style="margin:0px;padding:0px;">
                          <select id="r_chg_code" class="chosen-select" name="r_chg_name">
                                <?php foreach($elements as $chg) { ?>
                                    <option value="<?php echo $chg->charge_code; ?>"> <?php echo $chg->charge_name; ?> </option>
                                <?php } ?>
                            </select>
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <input style="width:100%;" type="text" id="" name="r_desc" class="form-control-custom" value="Water Consumption">
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <input style="width:100%;" type="text" id="" name="r_usage" class="form-control-custom">
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <input style="width:100%;" type="text" id="seq_num" name="r_rate" class="form-control-custom">
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <button style="width:100%;" class="btn btn-white" id=""><i class="fa fa-plus success"></i></button>
                      </td>
                    </tr>      
                </thead>
              </form>
                <tbody id="tbl_ratesAdd" class="animate fadeIn">
                                                
                </tbody>
              </table> 
        </div>
</div>
<script>
$(document).ready(function () {
    $('#add_rates_form').data('serialize',$('#add_rates_form').serialize());
    //$('#add_rate_sched').hide();
     $(".chosen").chosen({width:"100%;"});
      $('.i-checks').iCheck({
          checkboxClass: 'icheckbox_square-green',
          radioClass: 'iradio_square-green',
      });

      $('#add_rates_form').validate({
        rules :{
            rate_name:{
                required: true
            }
        },submitHandler: function(form){
          dataString = $("#add_rates_form").serialize();
          $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax').'/insert_rate'); ?>",
            data: dataString,
            dataType: 'json',
          success: function(data){
            if(data[0].error == 1){
                notifymsg("danger",data[0].msg);
            }else{
                notifymsg("success",". . .New Rate Added Successfully");
                mID = data[0].id; console.log(mID);
                $('#s_rate_id').val(mID);
                $('#add_rate_sched').show();
                $('#add_rates_form').find('input, button').attr('disabled','disabled');
                $('#rate_ena').attr('disabled','disabled');$('input').iCheck('update');
                $('#cancel_add').html('Complete');
            }
          }      
         });   
        }
      });

      $('#rate_list_form').validate({
        rules :{
            r_desc:{
                required: true
            },
            r_rate:{
                required: true,
                number: true
            },
            r_usage:{
              required: true,
              number : true
            }
        },submitHandler: function(form){
          dataString = $("#rate_list_form").serialize();
          $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax').'/insert_rate_sched'); ?>",
            data: dataString,
            dataType: 'json',
          success: function(data){
            if(data[0].error == 1){
                notifymsg("danger",data[0].msg);
            }else{
                notifymsg("success",". . .Schedule Line Added Successfully");
                $('#tbl_ratesAdd').empty();
                var trHTML = '';
                $.each(data, function(i, item) {
                    trHTML += '<tr><td>' + data[i].charge_name + '</td><td text-align:right;>' + data[i].description + '</td><td text-align:right;>' + data[i].usage_qty + '</td><td text-align:right;>' + data[i].rate + '</td><td></td></tr>';
                });
                $('#tbl_ratesAdd').append(trHTML);
                $("#r_chg_code option:first").attr('selected','selected').trigger('chosen:updated');
                $('#rate_list_form')[0].reset();
            }   
          }   
         });   
        }
      });
        function alert_cancel(){
            if($('#add_rates_form').serialize()!=$('#add_rates_form').data('serialize')){
                swal({
                    title: "Are you sure?",
                    text: "Your work will not be save",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Leave",
                    cancelButtonText: "Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                        close_add(); active_search();
                        notifymsg("hide","hide");
                    } else {
                        swal("Cancelled");
                    }
                });
                }else{
                close_add(); active_search();
                notifymsg("hide","hide");
            }
        } 
        $('#cancel_add').click(function () {
          if($('#cancel_add').html() == "Complete"){
            close_add(); active_search();
            notifymsg("hide","hide");
          }else{            
            alert_cancel();
          }
         });
        $('#addX').click(function(){
            alert_cancel();        
       });

});
</script>